<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>
<!-- SKU样式 -->
<link href='${BASE_PATH}/static/css/sku_style.css' media='all' rel='stylesheet' type='text/css' />
<head>
    <title>管理平台</title>
    <jsp:include page="../../include/header.jsp"></jsp:include>
    <style type="text/css">
			table td{
			text-align: center;
			white-space: normal; 
			overflow: hidden;
		    text-overflow: ellipsis;
			}
		 	table th{
			text-align: center;
		 	}
	</style>
</head>
<body>
<div id="wrapper"  class="row">
			<h1 class="page-header col-lg-12">兑换商品管理</h1>
	<!-- 搜索框 -->
		<div class="col-lg-12">
			<label class="search-label">商品编号：</label><input type="text" id="sGoodId" value="" class="form-control search-input width200" maxlength="21" placeholder="商品ID">
			<label class="search-label">商品名称：</label><input type="text" id="sGoodName" value="" class="form-control search-input width200" placeholder="商品名称">
			<label class="search-label">商品状态：</label>
			<div class="search-input">
			<select id="sState" class="selectpicker" data-width="150">
				<option value="0">全部</option>
				<option value="1">上架审核中</option>
				<option value="2">已上架</option>
				<option value="3">已下架</option>
				<option value="4">驳回</option>
			</select>
			</div>
			<div class="clearfix"></div>
			<label class="search-label">商品类别</label> 
				<div class="col-sm-2">
					<select name="sCategoryonid" id="sCategoryonid" class=" form-control">
						<option value="">请选择一级分类</option>
						<c:forEach items="${oneCategories}" var="category" varStatus="s">
							<option value="${category.categoryId}">${category.categoryName}</option>
						</c:forEach>
					</select> 
				</div>
				<div class="col-sm-2">
					<select name="sCategorytwid" id="sCategorytwid" class=" form-control">
						<option value="">请选择二级分类</option>
					</select> 
				</div>
				<div class="col-sm-2">
					<select name="sCategorythid" id="sCategorythid" class=" form-control">
						<option value="">请选择三级分类</option>
					</select> 
				</div>
				<div class="col-sm-2">
					<select name="sCategoryfoid" id="sCategoryfoid" class=" form-control">
						<option value="">请选择四级分类</option>
					</select>
				</div>
			<div class="clearfix"></div>
		</div>
		<div class="col-lg-12 title-top">
	    	<button type="button" class="btn btn-default pull-right" title="刷新" 
					onclick="window.location.reload();">
					<i class="fa fa-refresh"></i> 刷新
			</button>
			<button type="button" class="btn btn-success pull-right margin-lr" onclick="toAdd()"><span class="fa fa-plus">添加商品</span></button>
			<button class="btn btn-success search-btn" onclick="query();">确定</button>
			<button class="btn btn-success search-btn" onclick="reset();">重置</button>
			
			<div class="clearfix"></div>
		</div>
		<div class="col-lg-12 title-top">
			<div class="col-lg-12">
					<div class="text-muted single-line-text pull-left">共 <font color="#428bca" id="dataCount">0</font> 条记录</div>
					
			</div>
			<div class="table-responsive panel panel-default" >
				<table class="table table-noellipsis table-bordered" style=" overflow:scroll;">
		            <thead>
		                <tr>	
		                	<th width="260px">操作</th>
		               	    <th width="100px">商品</th>		               		
							<th width="100px">商品ID</th>
							<th width="300px">商品名称</th>
							<th width="100px">商品分类</th>
							<th width="100px">商品分类</th>
							<th width="100px">状态</th>
							<th width="180px">上线时间</th>
							<th width="80px;">客户页面</th>
		                </tr>
		            </thead>
		            <tbody id="dataList"></tbody>
		        </table>
			</div>
		</div>
	        	<div class="col-lg-12">
	        			<div class = "pull-right">
		        			<div class="text-muted  pull-left" style="margin-top:20px; margin-right:18px;">
							<select id="pageSize" name="pageSize" class="selectpicker" data-width="100" onchange="query()" >
				    					<option value="10" selected = "selected">10条/页</option>
										<option value="15">15条/页</option>
										<option value="20">20条/页</option>
										<option value="50">50条/页</option>
										<option value="100">100条/页</option>
				    				</select>
							</div>
			        		<ul id="dataPagination" class="pagination-sm pull-right"></ul>
			        	</div>
	        	</div>
	        
</div>
<jsp:include page="../../include/javascripts.jsp"></jsp:include>
<!-- 异步加载下一页数据后，用模板渲染 -->
<script type="text/html" id="thumbTpl">
<a href="javascript:void(0)" onclick="Kit.photo('{{thumb}}')" class="center-block thumbnail thumbnail-none-margin width50"><img src="{{thumb}}"></a>
</script>
<script type="text/html" id="dataTpl">
	{{each list as item}}
	<tr id="item{{item.id}}" data-id="{{item.id}}">
		{{if item.pstate==1}}
				{{if item.state==1}}
					<td>			
                       <a href="javascript:toEdit('{{item.id}}');"><span class="btn">编辑</span></a>
				        <a href="javascript:return false;" style="opacity: 0.3"><span class="btn">下架</span></a>
						<a href="javascript:showGoods('{{item.id}}');"><span class="btn">详情</span></a> 
					</td>
				{{else if item.state==2}}
					<td>						
                      <a href="javascript:toEdit('{{item.id}}');"><span class="btn">编辑</span></a>
                        <a href="javascript:doDown('{{item.id}}');"><span class="btn">下架</span></a>
						<a href="javascript:showGoods('{{item.id}}');"><span class="btn">详情</span></a> 
					</td>
				{{else if item.state==3}}
					<td>
						<a href="javascript:toEdit('{{item.id}}');"><span class="btn">编辑</span></a>
                        <a href="javascript:doUp('{{item.id}}');"><span class="btn">上架</span></a>
						<a href="javascript:Tem('{{item.id}}');"><span class="btn">扩展</span></a>
						<a href="javascript:showGoods('{{item.id}}');"><span class="btn">详情</span></a>
					</td>
                  {{else if item.state==4}}
					<td>
						<a href="javascript:toEdit('{{item.id}}');"><span class="btn">编辑</span></a>
                        <a href="javascript:BoHui('{{item.id}}');"><span class="btn">驳回原因</span></a>
					</td>
				{{/if}}
		{{else if item.pstate==2}}
			<td>
				<a href="javascript:toEdit('{{item.id}}');"><span class="btn">编辑</span></a>
				<a href="javascript:doUp('{{item.id}}');"><span class="btn">上架</span></a>
				<a href="javascript:Tem('{{item.id}}');"><span class="btn">扩展</span></a>
			</td>
		{{else if item.pstate==3}}
			<td>
				<a href="javascript:toEdit('{{item.id}}');"><span class="btn">编辑</span></a>
				<a href="javascript:doUp('{{item.id}}');"><span class="btn">上架</span></a>
				<a href="javascript:Tem('{{item.id}}');"><span class="btn">扩展</span></a>
			</td>
		{{/if}}
		<td><a href="javascript:void(0)" onclick="Kit.photo('${FTP_PATH}{{item.thumb}}')" class="center-block thumbnail thumbnail-none-margin width50"><img src="${FTP_PATH}{{item.thumb}}"></a></td>
		<td>{{item.id}}</td>
		<td style="WORD-WRAP: break-word" width="10px" >{{item.name}}</td>
		<td>{{item.oneName}}</td>
		<td>{{item.twoName}}</td>
		{{if item.pstate==1}}
			<td>
				{{if item.state==1}}
					上架审核中
				{{else if item.state==2}}
					<span style="color: #428bca;">已上架</span>
				{{else if item.state==3}}
					<span style="color: #a94442;">已下架</span>
				{{else if item.state==4}}
					<span style="color: #a94442;">被驳回</span>
				{{/if}}
			</td>
		{{else if item.pstate==2}}
			<td>售罄</td>
		{{else if item.pstate==3}}
			<td>降权</td>
		{{/if}}
			<td>{{item.createDate  }}</td>	
			<td>
				<a href=" http://yphapi.nczywc.cn/h5/#/pages/product/productExchange?id={{item.id}}&sid={{item.sid}}" target="_blank"><span class="btn">详情</span></a>
			</td>
		</tr>
	{{/each}}
</script>
<script type="text/javascript">
//点击事件取下级的值
$("#sCategoryonid").change(function(){
	sCategoryonid=$("#sCategoryonid").val();
	  $.ajax({
           type: "POST",
           url: "${BASE_PATH}/exchange/goods/sCategoryonid",
           data: {"sCategoryonid" : sCategoryonid},
           dataType: "json",
           traditional: true,
           success: function(data){
			$("#sCategorytwid").empty();
			$("#sCategorytwid").append("<option value=''>请选择二级分类</option>");
			for(var i=0; i<data.object.length;i++){
				$("#sCategorytwid").append("<option value='"+data.object[i].categoryId+"'>"+data.object[i].categoryName+"</option>");
               }
           }
       });
    });
$("#sCategorytwid").change(function(){
	sCategorytwid=$("#sCategorytwid").val();
	  $.ajax({
           type: "POST",
           url: "${BASE_PATH}/exchange/goods/sCategorytwid",
           data: {"sCategorytwid" : sCategorytwid},
           dataType: "json",
           traditional: true,
           success: function(data){
          	   $("#sCategorythid").empty(); 
               $("#sCategorythid").append("<option value=''>请选择三级分类</option>");
               for(var i=0; i<data.object.length;i++){
              	 $("#sCategorythid").append("<option value='"+data.object[i].categoryId+"'>"+data.object[i].categoryName+"</option>");
               }
           }
       });
    });
$("#sCategorythid").change(function(){
	sCategorythid=$("#sCategorythid").val();
	  $.ajax({
           type: "POST",
           url: "${BASE_PATH}/exchange/goods/sCategorythid",
           data: {"sCategorythid" : sCategorythid},
           dataType: "json",
           traditional: true,
           success: function(data){
          	   $("#sCategoryfoid").empty(); 
               $("#sCategoryfoid").append("<option value=''>请选择四级分类</option>");
               for(var i=0; i<data.object.length;i++){
              	 $("#sCategoryfoid").append("<option value='"+data.object[i].categoryId+"'>"+data.object[i].categoryName+"</option>");
               }
           }
       });
    });
var dataPaginator;
$(query);
function query(){
	var pageSize=$("#pageSize").val();
	var sGoodId = $("#sGoodId").val(),sGoodName = $("#sGoodName").val(),sCategoryonid = $("#sCategoryonid").val(), sCategorytwid = $("#sCategorytwid").val(),storeid = $("#sStoreId").val(), sState = $("#sState").val();
	var storeid;
	if(storeid !=null && storeid !="" && storeid !=undefined){
		storeid=storeid.join("','");
	}
	if(dataPaginator){
		dataPaginator.destroy();
	}//
	dataPaginator = Kit.pagination("#dataPagination","${BASE_PATH}/exchange/goods/page",{sGoodId:sGoodId,sGoodName:sGoodName,sCategoryonid:sCategoryonid,sCategorytwid:sCategorytwid,sStoreId:storeid,sState:sState,pageSize:pageSize},function(result){
		//设置显示最新的数据数量
		$("#dataCount").html(result.object.totalRow);
		//根据模板渲染数据并填充
		$("#dataList").empty().append(template("dataTpl",result.object));
	});
}
function reset(){
	$("#sGoodId").val("");
	$("#sGoodName").val("");
	$("#sSellerId").val("");$("#sSellerId").trigger("change");  $("#sStoreId").val("");$("#sStoreId").trigger("change"); 
	$("#sState").val("0");$("#sState").trigger("change");
	$("#sCategoryonid").val("");$("#sCategoryonid").trigger("change");
	$("#sCategorytwid").val("");$("#sCategorytwid").trigger("change");
	$("#sStoreId").selectpicker("refresh"); $("#sSellerId").selectpicker("refresh");
} 
//扩展
var TemDialog;
function Tem(id){
	TemDialog = Kit.dialog("扩展信息","${BASE_PATH}/exchange/goods/Tem/"+id,{closable:true,size:'size-wide'}).open();
} 
var detailDialog;
function showGoods(id){
	detailDialog = Kit.dialog("商品详情","${BASE_PATH}/exchange/goods/goodDetail/"+id,{closable:true,size:'size-wide'}).open();
}
var bohuilog;
function BoHui(id){
	bohuilog = Kit.dialog("驳回原因","${BASE_PATH}/exchange/goods/toBoHui?id="+id ,{closable:true}).open();
}

var addDialog;
function toAdd(){
	addDialog = Kit.dialog("添加","${BASE_PATH}/exchange/goods/toAdd",{closable:true,size:'size-wide'}).open();
	/* var state=${state};
	var qstate=${qstate};
	var power=${power};
	var RoleId=${RoleId}; 
	if(RoleId==1||RoleId==2){
	   if(state==2&&power==1){
	    	addDialog = Kit.dialog("添加","${BASE_PATH}/exchange/goods/toAdd",{closable:true,size:'size-wide'}).open();
	       }
	   if(state!=2){
		Kit.confirm("提示","请您先提交商家入驻信息")
	     }
	   if(power!=1){
		   Kit.confirm("提示","您的商家权限被关闭，请联系管理员")
		     }
	}else{
		if(state==2&&qstate==1){
			addDialog = Kit.dialog("添加","${BASE_PATH}/exchange/goods/toAdd",{closable:true,size:'size-wide'}).open();
		}
		if(qstate!=1) {
			Kit.confirm("提示","您的分公司权限被关闭，请联系管理员")
		}
		if(state!=2){
			Kit.confirm("提示","请您先提交商家入驻信息")
		}	
	}*/
  }
var editDialog;
function toEdit(id){
	editDialog = Kit.dialog("修改","${BASE_PATH}/exchange/goods/toEdit/"+id,{closable:true,size:'size-wide'}).open();
}
function onEditSuccess(newObject){
	$("#item"+newObject.id).replaceWith(template("dataTpl",{"list":[newObject]}));
}
function onLogoSet(id,thumb){
	$("#item"+id+" a").replaceWith(template("thumbTpl",{"thumb":thumb}));
}
function doDown(id){
	Kit.confirm("提示","确定要下架商品吗？",function(ref){
		$.post("${BASE_PATH}/exchange/goods/doDown",{'id':id},function(result){
			if(result.flag==0){
				onEditSuccess(result.object);
			}else{
				Kit.alert("操作失败");return;
			}
		});
	});
}
function doClerk(id){
	Kit.confirm("提示","确定要将商品置成售罄吗？",function(ref){
		$.post("${BASE_PATH}/exchange/goods/doClerk",{'id':id},function(result){
			if(result.flag==0){
				onEditSuccess(result.object);
			}else{
				Kit.alert("操作失败");return;
			}
		});
	});
}
function doUp(id){
	Kit.confirm("提示","确定要重新上该架商品吗？",function(ref){
		$.post("${BASE_PATH}/exchange/goods/doUp",{'id':id},function(result){
			if(result.flag==0){
				onEditSuccess(result.object);
			}else{
				//Kit.alert("操作失败");return;
				Kit.alert(result.message);return;
			}
		});
	});
}
function doDelete(id){
	Kit.confirm("提示","确定要删除商品吗？",function(ref){
		$.post("${BASE_PATH}/goods/base/delete",{'id':id},function(result){
			if(result.flag==0){
				window.location.reload(true) ;
			}else{
				Kit.alert("删除失败");return;
			}
			
		});
	});
}

//在表格中显示图片
/*  
 * 
 <td><a href="javascript:void(0)" onclick="Kit.photo('${FTP_PATH}{{item.thumb}}')" class="center-block thumbnail thumbnail-none-margin width50"><img src="${FTP_PATH}{{item.thumb}}"></a></td>
 <td>{{item.oneName}}</td>
 <td>{{item.twoName}}</td>
 */
</script>
</body>
</html>